<template>
	<view class="activityDetails">
		<view class="con1" style="text-align: center;display: block;font-size: 40rpx;"> {{no}}</view>
		<view class="con1">
			<view class="con1-title"> 店名： </view>
			<image class="con1-logo" src="../static/img/logo.png" mode=""></image>
			<text style="font-size: 36rpx;font-weight: 500;">超圳</text>
			<input class="con1-input" type="text" v-model="formData.name" placeholder="请输入店铺名" value="" maxlength="5"/>
			<text style="font-size: 36rpx;font-weight: 500;">商行</text>
		</view>
		
		<view class="con1" style="border: 0;padding-bottom: 0rpx;">
			<view class="con1-title"> 店铺广告语：</view>
		</view>
		
		<view class="con1" style="display: block;padding-top: 0rpx;border-bottom: 2rpx solid #ededed;">
			<textarea class="bz-text" v-model="formData.region" value="" placeholder=" 请输入店铺广告语" maxlength="20"/>
            <view class="" style="font-size: 28rpx; margin-top: 20rpx; color: #7b7b7b;text-align: right;"> 限制20个字符 </view>
		</view>
		
		<view class="remark"> 一年之内只限<text class="remark-sp">3次</text>机会修改店铺名称，当前还有<text class="remark-sp">{{chanceNum}}次</text>机会 </view>
		
		
		<view class="but-box" :style="'height:' + bottomHeight + 'rpx;'">
			<view :class="chanceNum > 0 ? 'but' : 'but1'" @click="subEdit()">确认修改</view>
		</view>
	</view>
</template>

<script>
	var _self;
	import serve from '../static/request.js';
	import storage from '../static/appkey.js';
	import common from '../static/jump.js';
	import uniQrcode from '../static/wxqrcode.js';
	export default {
		data() {
			return {
				bottomHeight: 110,
				/* 底部按钮高度，避免iPhonex导航黑条 */
				formData:{
					appkey: uni.getStorageSync('appkey'),
					'access-token': uni.getStorageSync('access-token'),
					id: 0,
					name: '',
					region: ''
				},
				no: '',
				chanceNum: 0,
			}
		},
		methods: {
			getInfo() {
				serve.request({
					url: '/spread/index/main',
					data: {
						appkey: uni.getStorageSync('appkey'),
						'access-token': uni.getStorageSync('access-token')
					}
				}).then(res => {
					if (res.code == 200) {
						_self.no = res.data.no;
						_self.formData.name = res.data.name;
						_self.formData.id = res.data.id;
						_self.formData.region = res.data.region;
						_self.chanceNum = res.data.updateNum;
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none',
							success() {
								setTimeout(function() {
									common.jump('return_one');
								}, 2000)
							}
						});
					}
				});
			},
			subEdit(){
				if(_self.chanceNum == 0){
					return;
				}
				uni.showModal({
					title: '提示',
					content: '确认修改店铺名称',
					success: function (res) {
						if (res.confirm) {
                            uni.showLoading({
                                title: '修改中'
                            });
							serve.request({
								url: '/spread/index/update',
								data: _self.formData
							}).then(res => {
                                uni.hideLoading();
								let resultCode = res.code;
								let resultMessage = res.message;
								uni.showToast({
									title: resultMessage,
									icon: 'none',
									success() {
										if(resultCode == 200){
											setTimeout(function() {
												uni.redirectTo({
													url: '/business/promote_store'
												})
											}, 2000)
										}
									}
								});
							});
						}
					}
				})
			},
			jump(jump_type, jump_link) {
				common.jump(jump_type, jump_link)
			}
		},
		onLoad(options) {
			_self = this;
			if (uni.getSystemInfoSync().safeAreaInsets.top > 20) {
				_self.bottomHeight = 178;
			}
			_self.getInfo();
		},
		onPullDownRefresh() {
			_self.getInfo();
		},
	}
</script>

<style scoped>
	.activityDetails {
		padding: 0 36rpx;
		padding-bottom: 200rpx;
		font-size: 32rpx;
		color: #1e2022;
	}
	
	
	.con1{
		display: flex;
		align-items: center;
		padding: 20rpx 0;
		border-bottom: 2rpx solid #ededed;
	}
	.con1-title{
		margin-right: 30rpx;
	}
	.con1-logo{
		width: 66rpx;
		height: 66rpx;
		margin-right: 10rpx;
	}
	.con1-input{
		    border: 2rpx solid #dedede;
		    height: 60rpx;
		    width: 250rpx;
		    padding: 0 18rpx;
			margin-left: 20rpx;
			margin-right: 20rpx;
	}
	.con1-input-ggy{
		border: 2rpx solid #dedede;
		height: 60rpx;
		width: 390rpx;
		padding: 0 18rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;
	}
	
	
	
	.con{
		padding: 40rpx 0;
		display: flex;
		align-items: center;
		justify-items: flex-start;
	}
	
	
	.remark{
		padding-top: 20rpx;
		font-size: 30rpx;
		color: #333;
	}
	
	
	.but-box{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100vw;
		background: #ffffff;
	}
	.but{
		background: #FFBC00;
		color: #fff;
		border-radius: 0;
		width: 100vw;
		height: 88rpx;
		text-align: center;
		line-height: 88rpx;
		font-size: 36rpx;
	}
	.but1{
		color: rgba(0,0,0,.3);
		background-color: #f7f7f7;
		border-radius: 0;
		width: 100vw;
		height: 88rpx;
		text-align: center;
		line-height: 88rpx;
		font-size: 36rpx;
	}
	
	.remark-sp{
		color: #e24444;
	}
	.bz-text{
		border: 2rpx solid #ededed;
		padding: 10rpx;
		margin-top: 30rpx;
		width: 100%;
		height: 120rpx;
		line-height: 40rpx;
		font-size: 30rpx;
		color: #333333;
	}
</style>
